<template>
  <div class="center-container">
    <div class="three-container" ref="earthRef"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Center',
})
</script>
<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount, watch } from 'vue'
import World from '@/Earth/world/Word'
import { dataScreenApi } from '@/api/dataScreen'
import { nodeManagementApi } from '@/api/nodeManagement'
import { ElNotificationFn } from '@/utils/computedUtils'
import { useNodeInfoStore } from '@/stores/nodeInfo'
const nodeInfoStore = useNodeInfoStore()
const earthRef = ref<HTMLElement | null>(null)
let world: World | null = null
const orbitSatelliteNodeData = ref<any[]>([])
function showOrbitLayer(orbitType?: string) {
  if (!world) return
  world.showOrbitLayer(orbitType)
}
function handleSatelliteClick(nodeData: any,msg?:string) {
  if(msg){
    ElNotificationFn('warning',msg)
  }else{
    ElNotificationFn('success',`卫星节点被点击:${nodeData.satelliteName}`)
    nodeInfoStore.setNodeInfo(nodeData)
  }
}
async function getOrbitSatelliteNodeData() {
  try {
    const {data} = await nodeManagementApi.postNodeConditionQuery({})
    data.map((item:any)=>{
     let data:any= {}
    if(item.faultInjection == 1){
    item.connectionStatus = 2
    }
    data.connectionStatus = item.connectionStatus
    data.satelliteType = Math.floor(Math.random()*3)//随机生成卫星类型
    data.satelliteName = `节点${item.nodeId}`
    data.nodeId = item.nodeId
    data.ipAddress = item.ipAddress
    orbitSatelliteNodeData.value.push(data)
    })
  } catch (error) {}
  
}
onMounted(async () => {
  await getOrbitSatelliteNodeData()
})
watch(()=>orbitSatelliteNodeData.value, (newVal) => {
   if(!newVal.length || !earthRef.value) return
    world = new World({
      dom: earthRef.value,
      count: 300,
      lonList: [],
      satelliteNodes: orbitSatelliteNodeData.value,
      onSatelliteClick: handleSatelliteClick
    })
},{
  deep:true
})
onBeforeUnmount(() => {
  world = null
})
defineExpose({
  showOrbitLayer,
  handleSatelliteClick 
})
</script>

<style lang="scss" scoped>
.center-container{
  width: 100%;
  height: 100%;
  position: relative;
  .three-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -10%;
    left: 0;
    z-index: 900;
  }
}
</style>
 